<script setup name="addressList">
import { reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { useAddressData } from './hooks/useAddressData'
import {loginApi} from "@/api";
const {
  getAddressData,
  addressList,
  loading,
  handleDelete,
  handleDefault,
   } = useAddressData()
let currentRouteParams = reactive({})
onShow(() => {
  getAddressData()
})
onLoad((options) => {
  currentRouteParams = options
})
const handleToOrder = addressId => {
  if(currentRouteParams.type === "to") {
     currentRouteParams.toAddressId = addressId
  } else  {
    currentRouteParams.fromAddressId = addressId
  }
  uni.navigateTo({
    url: `/pages/createOrder/createOrder?type=${currentRouteParams.type}&fromAddressId=${currentRouteParams.fromAddressId}&toAddressId=${currentRouteParams.toAddressId}&orderId=${currentRouteParams?.orderId || 0}`
  })
}
const handleToCreateAddress = () => uni.navigateTo({ url: '/pages/address/createAddress' })
const handleToUpdateAddress = ({ id }) => uni.navigateTo({ url: '/pages/address/createAddress?id=' + id })
</script>


<template>
  <scroll-view class="address" :class="{ 'empty-address': !addressList.length }">
    <up-loading-icon v-if="loading" text="加载中" textSize="18" />
    <blockquote v-else>
      <up-empty v-if="!addressList.length" text="空空如也~" />
      <view class="lists" v-else>
        <view class="item" v-for="address in addressList " :key="address.id">
          <blockquote @click="() => handleToOrder(address.id)">
            <view class="tit">
              <text>{{ address.name }}</text>
              <text class="phone">{{ address.phone }}</text>
            </view>
            <view class="detailAddress">
              <text>{{ address.provinceName + address.address }}</text>
            </view>
          </blockquote>
            <view class="setbox">
              <view class="default">
                <up-checkbox usedAlone @change="() => handleDefault(address)" v-model:checked="address.isDefault" label="设置为默认地址" />
              </view>

              <view class="set">
                <up-button @click="() => handleDelete(address)" icon="trash" type="error" size="mini" class="setBtn">
                  删除
                </up-button>
                <up-button @click="() => handleToUpdateAddress(address)" icon="edit-pen" type="primary" size="mini" class="setBtn">
                  修改
                </up-button>
              </view>
            </view>
        </view>
      </view>
      <view class="addBtn">
        <up-button class="btn" @click="handleToCreateAddress" type="primary">新增地址</up-button>
      </view>
    </blockquote>
  </scroll-view>
</template>

<style scoped>
:deep(.uni-page-head-btn) {
  display: block !important;
}
.address {
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;
  min-height: calc(100vh - 88rpx);
}
.empty-address {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 100px);
}
.addBtn {
  width: 100%;
  height: 200rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10rpx;
  box-sizing: border-box;
  z-index: 9999;
}

.btn {
  width: 100%;
  //background-color: #00aaff;
  color: #fff;
  border-radius: 40rpx;
}

.lists {
  margin-bottom: 240rpx;
}

.item {
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 15rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.tit {
  font-size: 34rpx;
  font-weight: 700;
  color: #333;
}
.phone {
  margin-left: 25rpx;
}

.detailAddress {
  margin: 15rpx 0 30rpx;
  font-size: 30rpx;
  color: #333;
}

.setbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.set {
  width: 40%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setBtn {;
  width: 30rpx;
}

/deep/ uni-checkbox .uni-checkbox-input {
  width: 18px;
  height: 18px;
}

.default {
  display: flex;
  align-items: center;
}

.default text {
  font-size: 26rpx;
}

.tag {
  font-size: 20rpx;
  margin-left: 15rpx;
  padding: 0rpx 10rpx;
  box-sizing: border-box;
  border-radius: 4rpx;
  border: 1px solid #00aaff;
  color: #00aaff;
}
</style>
